<!DOCTYPE html>
<html>

<head>
    <title>图片轮播组件</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <meta name="descriptions" content="图片轮播，采用跑马灯效果" />
    <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css"
            />
    <script src="../highlight/shCore.js"></script>
</head>

<body>
<div class="wrapper">
    <h2>carousel</h2>
    <fieldset>
        <legend>图片轮播组件</legend>图片轮播，采用跑马灯效果</fieldset>
    <fieldset>
        <legend>使用说明</legend>
        <table class="table-doc" border="1">
            <colgroup>
                <col width="180" />
                <col width="80" />
                <col width="120" />
            </colgroup>
            <tr>
                <th>名字</th>
                <th>类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
            <tr>
                <td align="center" colspan="4">配置参数</td>
            </tr>
            <tr>
                <td>pictures</td>
                <td>Array</td>
                <td>[]</td>
                <td>轮播图片素材，可配置src和alt属性</td>
            </tr>
            <tr>
                <td>links</td>
                <td>Array</td>
                <td>[]</td>
                <td>图片点击链接，可配置href和title属性</td>
            </tr>
            <tr>
                <td>pictureWidth</td>
                <td>Number</td>
                <td>500</td>
                <td>图片显示宽度</td>
            </tr>
            <tr>
                <td>pictureHeight</td>
                <td>Number</td>
                <td>200</td>
                <td>图片显示高度</td>
            </tr>
            <tr>
                <td>effect</td>
                <td>String</td>
                <td>"slide"</td>
                <td>图片切换类型，取值：none:无特效 / fade:渐隐 / slide:滑动</td>
            </tr>
            <tr>
                <td>easing</td>
                <td>String</td>
                <td>"easeInOut"</td>
                <td>缓动类型，取值 linear:无缓动效果 / easeIn:在过渡的开始提供缓动效果 / easeOut:在过渡的结尾提供缓动效果 / easeInOut
                    在过渡的开始和结尾提供缓动效果</td>
            </tr>
            <tr>
                <td>timeout</td>
                <td>Number</td>
                <td>2500</td>
                <td>切换时间间隔</td>
            </tr>
            <tr>
                <td>during</td>
                <td>Number</td>
                <td>300</td>
                <td>切换速度，越小越快，单位为毫秒</td>
            </tr>
            <tr>
                <td>alwaysShowArrow</td>
                <td>Boolean</td>
                <td>true</td>
                <td>显示左右切换箭头</td>
            </tr>
            <tr>
                <td>alwaysShowSelection</td>
                <td>Boolean</td>
                <td>true</td>
                <td>显示底部圆形切换部件</td>
            </tr>
            <tr>
                <td>autoSlide</td>
                <td>Boolean</td>
                <td>true</td>
                <td>自动播放</td>
            </tr>
            <tr>
                <td>hoverStop</td>
                <td>Boolean</td>
                <td>true</td>
                <td>鼠标经过停止播放</td>
            </tr>
            <tr>
                <td>adaptiveWidth</td>
                <td>Boolean</td>
                <td>false</td>
                <td>适应外围宽度，为true时指定pictureWidth不起作用</td>
            </tr>
            <tr>
                <td>adaptiveHeight</td>
                <td>Boolean</td>
                <td>false</td>
                <td>适应外围高度，为true时指定pictureHeight不起作用</td>
            </tr>
            <tr>
                <td>eventType</td>
                <td>String</td>
                <td>"click"</td>
                <td>触发tab切换的nav上的事件类型，取值click\mouseenter\both</td>
            </tr>
            <tr>
                <td>arrowLeftNormalSrc</td>
                <td>String</td>
                <td>""</td>
                <td>左箭头正常状态图标，可不传</td>
            </tr>
            <tr>
                <td>arrowRightNormalSrc</td>
                <td>String</td>
                <td>""</td>
                <td>右箭头正常状态图标，可不传</td>
            </tr>
            <tr>
                <td>arrowLeftHoverSrc</td>
                <td>String</td>
                <td>""</td>
                <td>左箭头hover状态图标，可不传</td>
            </tr>
            <tr>
                <td>arrowRightHoverSrc</td>
                <td>String</td>
                <td>""</td>
                <td>右箭头hover状态图标，可不传</td>
            </tr>
            <tr>
                <td>arrowLeftClass</td>
                <td>String</td>
                <td>""</td>
                <td>左右箭头的className，可不传</td>
            </tr>
            <tr>
                <td>arrowRightClass</td>
                <td>String</td>
                <td>""</td>
                <td>左右箭头的className，可不传</td>
            </tr>
        </table>
    </fieldset>
    <ul class="example-links">
        <li>
            <a href="avalon.carousel.ex.html">图片轮播组件-默认配置图片轮播</a>
        </li>
        <li>
            <a href="avalon.carousel.ex1.html">图片轮播组件-自定义宽高</a>
        </li>
        <li>
            <a href="avalon.carousel.ex2.html">图片轮播组件-自定义图片切换时间间隔 / 自定义图片切换速度</a>
        </li>
        <li>
            <a href="avalon.carousel.ex3.html">图片轮播组件-自定义不显示左右切换箭头和底部圆形选择部件 / 自定义鼠标经过不停止播放</a>
        </li>
        <li>
            <a href="avalon.carousel.ex4.html">图片轮播组件-自定义effect</a>
        </li>
        <li>
            <a href="avalon.carousel.ex5.html">图片轮播组件-自定义缓动类型</a>
        </li>
        <li>
            <a href="avalon.carousel.ex6.html">图片轮播组件-自定义填充外围宽度和高度</a>
        </li>
    </ul>
</div>
</body>

</html>